<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>

<script src="js/animate.js"></script>
<script>
    //标注了每个图片要运动到的位置
    var config = [

        {
            width: 600,
            top: 70,
            left: 0,
            opacity: 0.8,
            zIndex: 3
        },//1
        {
            width: 800,
            top: 100,
            left: 200,
            opacity: 1,
            zIndex: 4
        },//2
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        },//3
        {
            width: 400,
            top: 20,
            left: 750,
            opacity: 0.2,
            zIndex: 2
        },//4

        {
            width: 400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        }//0
    ];//config其实就是一个配置单 规定了每张图片的大小位置层级透明度

    //获取元素
    var slide = document.getElementById("slide");
    var list = slide.children[0];
    var lis = list.children;
    var wrap = document.getElementById("wrap");
    var arr = slide.children[1];
    var arrLeft = arr.children[0];
    var arrRight = arr.children[1];

    //第一步是根据config中对应的元素，让每个li运动到指定位置
    //遍历config
    for (var i = 0; i < config.length; i++) {
        //让lis中的某个li运动到config对应的一个元素上
        animate(lis[i], config[i]);
    }
    var timerMain= setInterval(function(){
        arrRight.click();
    },2000)

    //第二步设置移入移出，箭头的显示和隐藏
    wrap.onmouseover = function () {
        //让arr渐渐的显示
        animate(arr, {"opacity": 1});
        clearInterval(timerMain);
    };

    wrap.onmouseout = function () {
        //让arr渐渐的显示
        animate(arr, {"opacity": 0});
        timerMain= setInterval(function(){
            arrRight.click();
        },2000)
    };

    var flag = true;
    //第三步点击
    arrRight.onclick = function () {
         if(flag){
             //flag=false;
             config.push(config.shift());
             //config在更改以后，li不会运动的
             //让li根据config中新的元素位置，再次进行运动
             changePos();
         }

    };

    arrLeft.onclick=function(){
        if(flag){
            flag=false;
            config.unshift(config.pop()) ;
            changePos();
        }

    }

    function changePos(){
        for(var i=0;i<lis.length;i++){
            animate(lis[i],config[i],function(){
                flag=true;
            });
        }
    }

</script>
</body>
</html>
